<template>
<div class="tab-income">
    <div class="panel">
        <div class="panel-header">
            <div class="bl"></div>
            <div class="title">收款计划</div>
        </div>
        <div class="panel-body">
            <el-table :data="collects" border>
                <el-table-column label="计划收款类型" prop="title"></el-table-column>
                <el-table-column label="计划收款时间" prop="collect_date"></el-table-column>
                <el-table-column label="计划收款金额" prop="price"></el-table-column>
            </el-table>
        </div>
    </div>

    <div class="panel mt20">
        <div class="panel-header">
            <div class="bl"></div>
            <div class="title">已收款项</div>
            <div class="more">
                <el-button type="primary" @click="showCreateView">添加</el-button>
            </div>
        </div>
        <div class="panel-body">
            <el-table :data="incomeList" border>
                <el-table-column label="审核状态" prop="check_tag">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showAuditProcess(scope.row.check_no)">{{ scope.row.check_tag }}</el-link>
                    </template>
                </el-table-column>
                <el-table-column label="收款类型" prop="type.title"></el-table-column>
                <el-table-column label="收款方式" prop="way.title"></el-table-column>
                <el-table-column label="收款金额" prop="total"></el-table-column>
                <el-table-column label="创建时间" prop="create_time" width="180"></el-table-column>
                <el-table-column label="收款凭证" prop="receipt">
                    <template slot-scope="scope">
                        <upload-file-list :file-list="scope.row.receipt"></upload-file-list>
                    </template>
                </el-table-column>
                <el-table-column label="收款单据" prop="note">
                    <template slot-scope="scope">
                        <upload-file-list :file-list="scope.row.note"></upload-file-list>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="80px" v-if="hasRule('order-income-update')">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="showEditView(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>

    <create-view ref="createRef" @doRefresh="getData"></create-view>
    <edit-view ref="editRef" @doRefresh="getData"></edit-view>
    <audit-process-vue ref="processRef"></audit-process-vue>
</div>
</template>

<script>
import process from '@/components/mixins/process';
import createView from './income-create.vue'
import editView from './income-edit.vue'
import {
    getListApi
} from "@/api/order/income";
import uploadFileList from '@/components/files/index';

export default {
    components: {
        createView,
        editView,
        uploadFileList
    },
    props: {
        collects: {
            type: Array,
            default: function() {
                return [];
            }
        }
    },
    mixins: [process],
    data() {
        return {
            order_id: '',
            incomeList: [],
        };
    },
    methods: {
        getData(order_id) {
            this.order_id = order_id;
            getListApi({
                order_id: order_id
            }).then(res => {
                this.incomeList = res.data.list;
            })
        },
        showCreateView() {
            this.$refs['createRef'].showDrawer(this.order_id);
        },
        showEditView(row) {
            this.$refs['editRef'].showDrawer(row);
        },
        hasRule(value) {
            let userRules = localStorage.getItem('btnRules')
            if (userRules == undefined || userRules == null) {
                return false;
            }
        
            let arr = userRules.split(",");
            return arr.includes(value);
        }
    },
};
</script>
